<template>
    <el-dialog v-model="addclient" top="20px" :show-close="false" :modal-append-to-body="false" class="em">
        <h1 class="title">添加客户</h1>
        <div class="info-body">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="form-info" :size="formSize">
                <el-form-item label="客户名称" prop="cname">
                    <el-input  v-model="ruleForm.cname" placeholder="请输入顾客名称" class="cname"/>
                </el-form-item>
                <el-form-item label="客户地址" prop="caddress">
                    <el-input  v-model="ruleForm.caddress" placeholder="请输入顾客地址" class="cadd" />
                </el-form-item>
                <el-form-item label="联系方式" prop="cphone">
                    <el-input  v-model="ruleForm.cphone" placeholder="请输入联系方式" class="cphone" />
                </el-form-item>
                <el-form-item label="水票数量" prop="num">
                    <el-input-number  v-model="ruleForm.num" :min="0" class="num"/>
                </el-form-item>
            </el-form>
        </div>
        <br><br>
        <div>
            <el-button type="primary" @click="addCustomer()" class="but">确定</el-button>
            <el-button @click="cancel()" class="but"> 取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "AddClient",
        data() {
            return {
                ruleForm:{
                    cid:'',
                    cname:'',
                    caddress:'',
                    cphone:'',
                    num:'',
                },
                rules:{
                    cname:[
                        {required:true,message:'请输入顾客姓名',trigger:'blur'},
                        {min:2,max:15,message:'长度在2-15个字符',trigger: 'blur'}
                    ],
                    caddress:[
                        {required:true,message:'请输入顾客住址',trigger:'blur'},
                        {min:3,message:'长度大于3个字符',trigger: 'blur'}
                    ],
                    cphone: [
                        {required:true,message:'请输入顾客联系方式',trigger:'blur'},
                        {min:6,max:11,message:'长度小于11个字符',trigger: 'blur'}
                    ]
                },
                addclient: false,
            };
        },
        methods: {
            init() {  //弹窗
                var that = this;
                that.addclient = true;
            },
            cancel() {
                var that = this;
                that.addclient = false;
                this.emptyUserData();
            },
            emptyUserData(){
                this.ruleForm = {
                    cname: '',
                    caddress: '',
                    cphone: '',
                    num:''
                }
            },
            //添加顾客请求
            addCustomer(){
                var that = this;
                let cname=this.ruleForm.cname;
                let caddress=this.ruleForm.caddress;
                let cphone=this.ruleForm.cphone;
                let num=this.ruleForm.num;
                that.cancel();
                this.axios
                    .post("http://localhost:8080/customer/addCustomer?caddress=" + caddress + "&cname="+ cname + "&cphone="+ cphone + "&num="+ num + "")
                    .then(function(response){
                        that.$emit("updateData");
                        that.$refs['ruleFormRef'].resetFields();
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                this.$message({
                    type:'success',
                    message:"添加成功！"
                });
                },

        }
    }
</script>

<style scoped>
    .em{
        height: 100%;
        overflow: auto;
    }
    .info-body{
        display: flex;
        justify-content: space-around;
    }
    .title{
        font-size: 25px;
        color: #1E90FF;
        margin-top: -25px;
    }
    .form-info{
        display: flex;
        flex-direction: column;
    }
    .but{
        margin-right: 50px;
        margin-left: 70px;
    }
</style>